<template>
  <div style="padding-top: 20px;">
    <div style="height: 40px;position: relative;">
      <i class="el-icon-switch-button" style="position: absolute;right: 30px;top: 0px;font-size: 22px;cursor: pointer" @click="signOut"></i>
    </div>
    <el-form :inline="true" class="demo-form-inline" label-width="100px">
      <el-form-item label="股票代码">
        <el-select
          v-model="formData.stockCode"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="getDetail"
        >
          <el-option
            v-for="item in options"
            :key="item.tsCode"
            :label="`${item.name}-${item.tsCode}`"
            :value="item.tsCode"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="得分低于">
        <el-input-number placeholder="请输入" v-model="formData.totScoreLe" controls-position="right" :min="0" :max="100"/>
      </el-form-item>
      <el-form-item label="得分高于">
        <el-input-number placeholder="请输入" v-model="formData.totScoreGe" controls-position="right" :min="0" :max="100"/>
      </el-form-item>
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="dateArr"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyyMMdd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList({size: 20,current: 1})">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="width: 100%;padding: 20px;">
      <el-table :data="list">
        <el-table-column prop="stockName" label="名称"></el-table-column>
        <el-table-column prop="stockCode" label="代码"></el-table-column>
        <el-table-column prop="stockIndustry" label="板块"></el-table-column>
        <el-table-column prop="signol" label="风险信号" width="400"></el-table-column>
        <el-table-column prop="reportPeriod" label="统计日期"></el-table-column>
        <el-table-column prop="totScore1" label="得分"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="getDetails(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div style="margin-top: 20px;height: 30px;">
      <el-pagination
        style="float:right;"
        @size-change="sizeChange"
        @current-change="currentChage"
        :current-page="pagination.current"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next"
        :total="pagination.total"
      />
    </div>
    <el-dialog :title="detail.stockName + ' - ' + detail.reportPeriod + ' - ' + '企业体检报告'" :visible.sync="dialogTableVisible" width="100%">
      <Details :detail='detail' />
    </el-dialog>
  </div>
</template>

<script>
import Details from './Home.vue'
export default {
  components:{Details},
  data(){
    return {
      options: [],
      loading: false,
      dialogTableVisible: false,
      dateArr:[],
      formData: {
        totScoreLe: undefined,
        totScoreGe: undefined
      },
      list: [],
      pagination: {
        current: 1,
        size: 20,
        pageSizes: [10, 20, 30, 40],
        total: 0
      },
      detail: {},
    }
  },
  mounted(){
    this.getList();
  },
  watch:{
    dialogTableVisible(val){
      if(!val) this.detail = {}
    }
  },
  methods:{
    getDetail(){
      this.$http.get(`/pxv-report-app/examinationreport/detail`,{params:this.formData}).then(res => {
        let {success,data} = res || {}
        if(success){
          this.detail = data || {}
          let value = []
          this.option.radar.indicator = this.radarList.map(el => {
            value.push(data[el.feild] ? Number(data[el.feild]).toFixed(2) : '0.00')
            return {name: el.name, max: 10}
          })
          this.option.series[0].data = [{value,name: data.stockName,}]
          setTimeout(() => {
            var chartDom = this.$refs.leftEchart;
            var myChart = this.$echarts.init(chartDom);
            this.option && myChart.setOption(this.option);
          },0)
        }
      })
    },
    remoteMethod(keyword) {
      if (keyword !== '') {
        this.loading = true;
        setTimeout(() => {
          let params = {
            current: 1,size: 20,keyword
          }
          this.$http.get(`/pxv-report-app/stockinfo/selectStockInfoLikePage`,{params}).then(res => {
            let {success,data} = res || {}
            this.loading = false;
            if(success){
              let {records} = data || {}
              this.options = records || []
            }
          }).catch(() => {
            this.loading = false;
          })
        }, 200);
      } else {
        this.options = [];
      }
    },
    sizeChange(size){
      this.pagination.size = size
      this.getList(this.pagination)
    },
    currentChage(current){
      this.pagination.current = current
      this.getList(this.pagination)
    },
    getList(pagination){
      let {size,current} = pagination || this.pagination
      let [reportPeriodStart,reportPeriodEnd] = this.dateArr || []
      let params = {
        size,current,reportPeriodStart,reportPeriodEnd,
        ...this.formData
      }
      this.$http.get('/pxv-report-app/examinationreport/selectExaminationreportByCondPage',{params}).then(res => {
        let {data,success} = res || {}
        if(success) {
          let {records,size,current,total} = data || {}
          this.list = records || []
          this.pagination.size = size
          this.pagination.current = current
          this.pagination.total = total
        }
      })
    },
    getDetails(record){
      this.detail = record || {}
      setTimeout(() => {
        this.dialogTableVisible = true
      }, 0);
    },
    signOut(){
      window.localStorage.removeItem('accessToken')
      window.localStorage.removeItem('userName')
      window.localStorage.removeItem('userId')
      this.$router.push('./login')
    }
  }
}
</script>

<style>
.el-table th.el-table__cell{
  background: #eef1f6;
}
</style>